<template>
        <aside>
            <span class="el-icon-menu"></span>
            <p>
                全部菜单
            </p>
            <div class="miniMenu">
                <div class="menuContent">
                    <ul>
                        <li>培训</li>
                        <li>
                            <a href="">官网</a>
                        </li>
                        <li>
                            <a href="">平台宣传</a>
                        </li>
                        <li>
                            <a href="">代理指南</a>
                        </li>
                        <li>
                            <a href="">分销指南</a>
                        </li>
                        <li>
                            <a href="">医生指南</a>
                        </li>
                        <li>
                            <a href="">用户指南</a>
                        </li>
                    </ul>
                    <ul class="right">
                        <li>服务</li>
                        <li>
                            <a href="">代理服务</a>
                        </li>
                        <li>
                            <a href="">分销服务</a>
                        </li>
                        <li>
                            <a href="">绿色就医</a>
                        </li>
                        <li>
                            <a href="">用户服务</a>
                        </li>
                        <li>
                            <a href="">在线帮助</a>
                        </li>
                    </ul>
                </div>
            </div>
        </aside>
</template>

<script>
export default {
  name: 'asidemenu'
}
</script>

<style lang="scss">
@import '../scss/_variables.scss';
@import '../scss/fonts.scss';
aside{
    cursor:pointer;
    position:fixed;
    z-index:100;
    left:0;
    top:35%;
    padding:10px;
    width:50px;
    height:106px;
    text-align:center;
    background-color: $fc2;
    border:1px solid $bgc3;
    color:$fc4;
    .miniMenu{
        background-color:$fc2;
        display: none;
        position:absolute;
        z-index:99;
        top:0;
        left:48px;
        width:220px;
        height:300px;
        border:1px solid $blue1;
        .menuContent{
            padding:24px 24px 45px 24px;
            float:left;
            width:100%;
            ul{
                height:222px;
                float:left;
                li{
                    color:#000;
                    padding:8px;
                    &:first-child{
                        padding:10px 5px 20px;
                        font-size:18px;
                        color:$fc5;
                        @extend %yahei;
                    }
                }
            }
            .right{
                float:right;
                li:first-child{
                    color:$fc6;
                }
            }
        }
        }
    &:hover{
        background-color:$blue1;
        color:$fc2;
        .miniMenu{
            display: block;
        }
    }
    span{
        font-size:1.7rem;
    }
    p{
        margin:15px 0 0;
        font-size:14px;
        line-height:18px;
    }
}
</style>